<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<h:head>
	<style type="text/css">
.alignPanel>tbody>tr {
	vertical-align: top;
}
</style>
</h:head>
<body>
	<ui:composition template="../templates/mainTemplate.xhtml">
		<ui:define name="content">
			<h:form id="myForm">
				<p:panel header="#{messages['variableDefination.define']}">
					<h:panelGrid columns="1">
						<h:panelGrid columns="2">
							<h:outputText value="#{messages['variableDefination.categoryName']} : " />
							<h:outputText value="#{cVariableForm.category.name}" />
						</h:panelGrid>
						<p:dataTable value="#{cVariableForm.variableListOfParentCategories}" var="variable">
							<f:facet name="header">
								<h:outputText value="#{messages['variableDefination.variablesOfParentCategory']}" />
							</f:facet>
							<p:column headerText="#{messages['variableDefination.variableName']}">
								<h:outputText value="#{variable.name}" />
							</p:column>
							<p:column headerText="#{messages['variableDefination.type']}">
								<h:outputText value="#{variable.type}" />
							</p:column>
							<p:column headerText="#{messages['variableDefination.categoryName']}">
								<h:outputText value="#{variable.category.name}" />
							</p:column>
						</p:dataTable>
						<p:dataTable value="#{cVariableForm.variableListOfSelectedCategory}" var="variable" id="currentList">
							<f:facet name="header">
								<h:outputText value="Variables of #{cVariableForm.category.name}" />
							</f:facet>
							<p:column headerText="#{messages['variableDefination.variableName']}">
								<h:outputText value="#{variable.name}" />
							</p:column>
							<p:column headerText="#{messages['variableDefination.type']}">
								<h:outputText value="#{variable.type}" />
							</p:column>
							<p:column headerText="#{messages['variableDefination.categoryName']}">
								<h:outputText value="#{variable.category.name}" />
							</p:column>
							<p:column headerText="#{messages['variableDefination.operation']}">
								<center>
									<h:panelGroup>
										<p:commandLink action="#{cVariableAction.showDeletePanel(variable)}" oncomplete="deleteWidget.show();"
											update=":myForm:deletePanel">
											<p:graphicImage url="/images/remove.png" />
										</p:commandLink>
										<p:commandLink action="#{cVariableAction.showEnumPanel(variable)}" oncomplete="enumWidget.show();"
											update=":myForm:enumPanel" rendered="#{variable.type eq 'Enum'}">
											<p:graphicImage url="/images/configure.png" />
										</p:commandLink>
										<p:commandLink action="#{cVariableAction.showDropPanel(variable)}" oncomplete="dropWidget.show();"
											update=":myForm:dropPanel" rendered="#{variable.type eq 'DropDownList'}">
											<p:graphicImage url="/images/configure.png" />
										</p:commandLink>
									</h:panelGroup>
								</center>
							</p:column>
						</p:dataTable>

						<p:panel header="#{messages['variableDefination.newVariable']}" id="variablePanel">
							<h:panelGrid columns="2">
								<h:outputText value="#{messages['variableDefination.variableName']} : " />
								<p:inputText value="#{cVariableForm.variableDefination.name}" />

								<h:outputText value="#{messages['categoryDefination.description']} : " />
								<p:inputText value="#{cVariableForm.variableDefination.description}" />

								<h:outputText value="#{messages['variableDefination.label']} : " />
								<p:inputText value="#{cVariableForm.variableDefination.label}" />

								<h:outputText value="#{messages['variableDefination.tabName']} : " />
								<p:inputText value="#{cVariableForm.variableDefination.tabName}" />

								<h:outputText value="#{messages['variableDefination.valueType']} :" />
								<p:selectOneMenu value="#{cVariableForm.variableDefination.type}">
									<f:selectItems value="#{cVariableForm.variableTypeSelectItemList}" />
								</p:selectOneMenu>

								<h:outputText value="#{messages['variableDefination.required']} : " />
								<p:selectBooleanCheckbox value="#{cVariableForm.variableDefination.required}" />
								<h:outputText />
								<h:panelGroup>
									<p:commandButton value="#{messages['action.save']}" action="#{cVariableAction.save()}" update=":myForm" />
									<p:commandButton value="#{messages['action.cancel']}" />
								</h:panelGroup>
							</h:panelGrid>
						</p:panel>
					</h:panelGrid>
				</p:panel>

				<p:dialog id="enumPanel" widgetVar="enumWidget" closable="true">
					<f:facet name="header">
						<h:outputText value="Enum Variable" />
					</f:facet>
					<p:panelGrid columns="1">
						<p:panelGrid columns="2">
							<h:outputText value="Variable Name : " />
							<h:outputText value="#{cVariableForm.enumVariable.name}" />

							<h:outputText value="Key : " />
							<p:inputText value="#{cVariableForm.enumKey}" />

							<h:outputText value="Value : " />
							<p:inputText value="#{cVariableForm.enumValue}" />

							<h:outputText value="" />
							<p:commandButton value="Add Choice" action="#{cVariableAction.saveEnumVariable()}" update="enumTable" />
						</p:panelGrid>
						<p:dataTable var="variable" value="#{cVariableForm.enumVariable.choiseKeys()}" id="enumTable">
							<p:column headerText="Key">
								<h:outputText value="#{variable}" />
							</p:column>
							<p:column headerText="Value">
								<h:outputText value="#{cVariableForm.enumVariable.choices.get(variable)}" />
							</p:column>
							<p:column headerText="Operation">
								<p:commandLink action="#{cVariableAction.removeEnumKey(variable)}" update="enumTable">
									<p:graphicImage url="/images/remove.png" />
								</p:commandLink>
							</p:column>
						</p:dataTable>
					</p:panelGrid>
				</p:dialog>


				<p:dialog id="dropPanel" widgetVar="dropWidget" closable="true">
					<f:facet name="header">
						<h:outputText value="Drop Down Variable" />
					</f:facet>
					<p:panelGrid columns="1">
						<p:panelGrid columns="2">
							<h:outputText value="Variable Name : " />
							<h:outputText value="#{cVariableForm.dropVariable.name}" />

							<h:outputText value="Key : " />
							<p:inputText value="#{cVariableForm.dropKey}" />

							<h:outputText value="Value : " />
							<p:inputText value="#{cVariableForm.dropValue}" />

							<h:outputText value="" />
							<p:commandButton value="Add Choice" action="#{cVariableAction.saveDropVariable()}" update="dropTable" />
						</p:panelGrid>
						<p:dataTable var="variable" value="#{cVariableForm.dropVariable.choiseKeys()}" id="dropTable">
							<p:column headerText="Key">
								<h:outputText value="#{variable}" />
							</p:column>
							<p:column headerText="Value">
								<h:outputText value="#{cVariableForm.dropVariable.choices.get(variable)}" />
							</p:column>
							<p:column headerText="Operation">
								<p:commandLink action="#{cVariableAction.removeDropKey(variable)}" update="dropTable">
									<p:graphicImage url="/images/remove.png" />
								</p:commandLink>
							</p:column>
						</p:dataTable>
					</p:panelGrid>
				</p:dialog>

				<p:confirmDialog id="deletePanel" widgetVar="deleteWidget" message="Are you sure about deleting?"
					header="Delete Variable">
					<p:commandButton value="Yes" action="#{cVariableAction.delete()}" update=":myForm"
						oncomplete="deleteWidget.hide();" />
					<p:commandButton value="No" onclick="deleteWidget.hide();" />
				</p:confirmDialog>
			</h:form>
		</ui:define>
	</ui:composition>
</body>
</html>